<template>
  <div class="idea-layout">
    <!-- IDEA风格的顶部工具栏 -->
    <div class="idea-header">
      <div class="idea-header-title">模型管理</div>
      <div class="idea-header-actions">
        <div class="idea-filter-button-container">
          <n-button size="small" @click="toggleFilter" class="idea-button idea-filter-button">
            <template #icon>
              <n-icon><Filter /></n-icon>
            </template>
          </n-button>
          <!-- 筛选弹窗 -->
          <div v-if="filterVisible" class="idea-filter-dropdown">
            <div class="idea-filter-content">
              <!-- 类型筛选 -->
              <div class="idea-filter-section">
                <div class="idea-filter-title">
                  <span>功能类型</span>
                </div>
                <div class="idea-filter-options">
                  <n-button 
                    v-for="type in typeOptions" 
                    :key="type.value"
                    :type="selectedFilters.type === type.value ? 'primary' : 'default'"
                    size="small"
                    @click="selectTypeFilter(type.value)"
                    class="idea-filter-option-btn"
                  >
                    {{ type.label }}
                  </n-button>
                </div>
              </div>

              <!-- 标签筛选 -->
              <div class="idea-filter-section">
                <div class="idea-filter-title">
                  <span>标签</span>
                </div>
                <div class="idea-filter-options">
                  <n-button 
                    v-for="tag in tagOptions" 
                    :key="tag.value"
                    :type="selectedFilters.tags.includes(tag.value) ? 'primary' : 'default'"
                    size="small"
                    @click="selectTagFilter(tag.value)"
                    class="idea-filter-option-btn"
                  >
                    {{ tag.label }}
                  </n-button>
                </div>
              </div>

              <!-- 系列 -->
              <div class="idea-filter-section">
                <div class="idea-filter-title">
                  <span>系列类型</span>
                </div>
                <div class="idea-filter-options">
                  <n-button 
                    v-for="vendor in vendorOptions" 
                    :key="vendor.value"
                    :type="selectedFilters.vendor === vendor.value ? 'primary' : 'default'"
                    size="small"
                    @click="selectVendorFilter(vendor.value)"
                    class="idea-filter-option-btn"
                  >
                    {{ vendor.label }}
                  </n-button>
                </div>
              </div>

              <!-- 状态筛选 -->
              <div class="idea-filter-section">
                <div class="idea-filter-title">
                  <span>状态</span>
                </div>
                <div class="idea-filter-options">
                  <n-button 
                    v-for="status in statusFilterOptions" 
                    :key="status.value"
                    :type="selectedFilters.status === status.value ? 'primary' : 'default'"
                    size="small"
                    @click="selectStatusFilter(status.value)"
                    class="idea-filter-option-btn"
                  >
                    {{ status.label }}
                  </n-button>
                </div>
              </div>

              <!-- 上下文筛选 -->
              <div class="idea-filter-section">
                <div class="idea-filter-title">
                  <span>上下文</span>
                </div>
                <div class="idea-filter-options">
                  <n-button 
                    v-for="context in contextFilterOptions" 
                    :key="context.value"
                    :type="selectedFilters.context === context.value ? 'primary' : 'default'"
                    size="small"
                    @click="selectContextFilter(context.value)"
                    class="idea-filter-option-btn"
                  >
                    {{ context.label }}
                  </n-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <n-button type="primary" size="small" @click="openAdd" class="idea-button idea-add-button">
          <template #icon>
            <n-icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg></n-icon>
          </template>
        </n-button>
      </div>
    </div>
    
    <!-- IDEA风格的内容区域 -->
    <div class="idea-content">
      <div class="idea-model-cards-container">
        <div v-if="models.length === 0" class="idea-empty-state">
          <n-empty description="暂无模型数据">
            <template #extra>
              <n-button size="small" @click="openAdd">
                新增模型
              </n-button>
            </template>
          </n-empty>
        </div>
        
        <div v-else class="idea-model-cards-grid">
          <n-card 
            v-for="model in models" 
            :key="model.id" 
            class="idea-model-card"
            :class="{ 'idea-model-card-enabled': model.status === 1, 'idea-model-card-disabled': model.status !== 1 }"
            @click="openEdit(model)"
          >
            <!-- 状态指示器 -->
            <div class="idea-status-indicator" :class="{ 'idea-status-enabled': model.status === 1, 'idea-status-disabled': model.status !== 1 }">
              <div class="idea-status-dot"></div>
              <span>{{ model.status === 1 ? '可用' : '禁用' }}</span>
            </div>
            
            <!-- 卡片内容 -->
            <div class="idea-card-content">
              <!-- 模型名称和图标 -->
              <div class="idea-model-title-with-icon">
                <img v-if="model.icon" :src="`${apiPrefix}${model.icon}`" :alt="model.name" class="idea-model-icon" />
                <div v-else class="idea-model-icon-placeholder">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                    <line x1="8" y1="21" x2="16" y2="21"></line>
                    <line x1="12" y1="17" x2="12" y2="21"></line>
                  </svg>
                </div>
                <div class="idea-model-title">{{ model.name }}</div>
              </div>
              
              <!-- 描述 -->
              <div class="idea-model-description">
                {{ model.description || '暂无描述' }}
              </div>
              
               <!-- 标签 -->
               <div class="idea-model-tags">
                 <n-tag 
                   v-if="model.tags" 
                   size="small" 
                   class="idea-model-tag idea-type-tag"
                   :class="getTypeTagClass(getFirstTag(model))"
                 >
                   {{ getFirstTag(model) }}
                 </n-tag>
                 <n-tag 
                   v-for="tag in getModelTags(model)" 
                   :key="tag" 
                   size="small" 
                   class="idea-model-tag"
                 >
                   {{ tag }}
                 </n-tag>
               </div>
            </div>
          </n-card>
        </div>
      </div>
    </div>
    <!-- IDEA风格的右侧抽屉编辑 -->
    <n-drawer v-model:show="editVisible" :width="400" placement="right" class="idea-edit-drawer">
      <n-drawer-content :title="editMode === 'add' ? '新增模型' : '编辑模型'" closable>
        <n-form :model="editModel" label-width="80" label-align="left" size="small" class="idea-edit-form">
          <n-form-item label="模型名称">
            <n-input v-model:value="editModel.name" :disabled="editMode==='edit'" class="idea-input" />
          </n-form-item>
          <n-form-item label="系列">
            <n-select v-model:value="editModel.vendor" :options="vendorOptions" placeholder="可选，填写或选择系列" clearable filterable tag class="idea-select" />
          </n-form-item>
          <n-form-item label="API地址">
            <n-input v-model:value="editModel.apiUrl" class="idea-input" />
          </n-form-item>
          <n-form-item label="API Key">
            <n-input v-model:value="editModel.apiKey" placeholder="可选，填写模型API密钥" class="idea-input" />
          </n-form-item>
          <n-form-item label="模型类型">
            <n-select v-model:value="editModel.type" :options="typeOptions" placeholder="请选择模型类型" class="idea-select" />
          </n-form-item>
          <n-form-item label="启用状态">
            <n-switch v-model:value="editModel.status" :checked-value="1" :unchecked-value="0" />
            <span style="margin-left: 8px; color: var(--text-secondary);">
              {{ editModel.status === 1 ? '已启用' : '已禁用' }}
            </span>
          </n-form-item>
          <n-form-item label="标签">
            <n-select
              v-model:value="editModel.tags"
              :options="tagOptions"
              multiple
              placeholder="请选择标签"
              :max-tag-count="3"
              :max-tag-text-length="4"
              class="idea-select"
            />
          </n-form-item>
          <n-form-item label="描述">
            <n-input v-model:value="editModel.description" type="textarea" autosize class="idea-input" />
          </n-form-item>
          <n-form-item label="模型图标">
            <div style="display: flex; align-items: center; gap: 12px;">
              <!-- 图标显示区域 -->
              <div class="idea-icon-display" @click="openIconSelector">
                <div v-if="!editModel.icon" class="idea-icon-placeholder">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                  </svg>
                </div>
                <img v-else :src="`${apiPrefix}${editModel.icon}`" :alt="editModel.icon" class="idea-selected-icon" />
              </div>
              
              <!-- 上传新图标 -->
              <n-upload
                :show-file-list="false"
                accept="image/*"
                :max="1"
                @change="handleIconUpload"
                class="idea-icon-upload"
              >
                <n-button size="small" circle>
                  <template #icon>
                    <NIcon size="16">
                      <CloudUploadSharp />
                    </NIcon>
                  </template>
                </n-button>
              </n-upload>
            </div>
          </n-form-item>
        </n-form>
        
        <template #footer>
          <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0;">
            <n-button v-if="editMode === 'edit'" type="error" @click="confirmDelete">删除</n-button>
            <div style="display: flex; gap: 12px; margin-left: auto;">
              <n-button @click="editVisible = false">取消</n-button>
              <n-button type="primary" @click="saveModel">保存</n-button>
            </div>
          </div>
        </template>
      </n-drawer-content>
    </n-drawer>
    
    <!-- IDEA风格的图标选择模态框 -->
    <n-modal v-model:show="iconSelectorVisible" title="选择图标" preset="dialog" style="width: 400px;" class="idea-modal">
      <div class="idea-icon-selector-grid">
        <div 
          v-for="icon in availableIcons" 
          :key="icon"
          class="idea-icon-selector-option"
          :class="{ selected: editModel.icon === icon }"
          @click="selectIcon(icon)"
        >
          <img :src="`${apiPrefix}${icon}`" :alt="icon" class="idea-icon-selector-image" />
        </div>
      </div>
      <template #action>
        <n-button @click="iconSelectorVisible = false">取消</n-button>
      </template>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { NButton, NModal, NForm, NFormItem, NInput, NCard, NSelect, NUpload, NIcon, NTag, useDialog, NDrawer, NDrawerContent, NSwitch, NEmpty } from 'naive-ui'
import { CloudUploadSharp } from '@vicons/ionicons5'
import { Filter } from '@vicons/carbon'
import { aiService } from '../../shared/services/ai-service'

// API前缀，从环境变量中获取
const apiPrefix = import.meta.env.VITE_API_BASE_URL || 'http://127.0.0.1:8080'

const models = ref<any[]>([])
const dialog = useDialog()
const editVisible = ref(false)
const editModel = ref<any>({})
const editMode = ref<'edit'|'add'>('edit')
const availableIcons = ref<string[]>([])
const iconSelectorVisible = ref(false)

// 筛选器相关
const filterVisible = ref(false)
const selectedFilters = ref({
  type: '',
  tags: [] as string[],
  vendor: '',
  status: '',
  context: ''
})

const vendorOptions = [
  { label: 'ollama', value: 'ollama' },
  { label: 'openai', value: 'openai' }
]

const typeOptions = [
  { label: '对话', value: '对话',color:'#18a058' },
  { label: '嵌入', value: '嵌入',color:'#18a058' },
  { label: '视频', value: '视频',color:'#18a058' },
  { label: '重排序', value: '重排序',color:'#18a058' }
]

const tagOptions = [
  { label: '工具', value: '工具' },
  { label: '免费', value: '免费' },
  { label: '收费', value: '收费' },
  { label: '推理', value: '推理' },
  { label: '对话', value: '对话' },
  { label: '视觉', value: '视觉' },
  { label: '生图', value: '生图' },
  { label: '文档', value: '文档' }
]

// 筛选器选项 - 使用与表单相同的选项
const statusFilterOptions = [
  { label: '可用', value: '1' },
  { label: '禁用', value: '0' }
]

const contextFilterOptions = [
  { label: '≥ 8K', value: '8k' },
  { label: '≥ 16K', value: '16k' },
  { label: '≥ 32K', value: '32k' },
  { label: '≥ 128K', value: '128k' }
]

function openEdit(row: any) {
  editModel.value = { ...row }
  // 处理标签数据，将逗号分隔的字符串转换为数组
  if (editModel.value.tags) {
    editModel.value.tags = editModel.value.tags.split(',').map((tag: string) => tag.trim()).filter((tag: string) => tag)
  } else {
    editModel.value.tags = []
  }
  editMode.value = 'edit'
  editVisible.value = true
}

function openAdd() {
  editModel.value = { name: '', vendor: '', type: '对话', apiUrl: '', apiKey: '', description: '', icon: '', tags: [], status: 1 }
  editMode.value = 'add'
  editVisible.value = true
}

function handleIconUpload(options: any) {
  const { file } = options
  if (file && file.file) {
    aiService.uploadModelIcon(file.file).then((res: any) => {
      // 处理后端响应格式：{code: 0, msg: "success", data: [...]}
      if (res && (res.code === 0 || res.success === true)) {
        editModel.value.icon = res.data
      } else {
        console.error('上传图标失败:', res?.msg || res?.message || '未知错误');
      }
    }).catch((error: any) => {
      console.error('上传图标失败:', error);
    })
  }
}

function selectIcon(icon: string) {
  editModel.value.icon = icon
  iconSelectorVisible.value = false
}

function openIconSelector() {
  iconSelectorVisible.value = true
}

// 获取模型列表
async function fetchModels() {
  try {
    const response = await aiService.getAiModels(selectedFilters.value)
    if (response && response.code === 0) {
      models.value = response.data || []
    } else {
      console.error('获取模型列表失败:', response?.msg || '未知错误');
      models.value = []
    }
  } catch (error) {
    console.error('获取模型列表出错:', error);
    models.value = []
  }
}

// 获取可用图标列表
async function fetchAvailableIcons() {
  try {
    const response = await aiService.getAvailableIcons()
    if (response && response.code === 0) {
      availableIcons.value = response.data || []
    } else {
      console.error('获取图标列表失败:', response?.msg || '未知错误');
      availableIcons.value = []
    }
  } catch (error) {
    console.error('获取图标列表出错:', error);
    availableIcons.value = []
  }
}

function saveModel() {
  // 处理标签数据，将数组转换为逗号分隔的字符串
  const modelData = { ...editModel.value }
  if (Array.isArray(modelData.tags)) {
    modelData.tags = modelData.tags.join(',')
  }

  aiService.saveAiModel(modelData).then((res: any) => {
    // 处理后端响应格式：{code: 0, msg: "success", data: [...]}
    if (res && res.code === 0) {
      editVisible.value = false
      fetchModels()
    } else {
      console.error('保存模型失败:', res?.msg || '未知错误');
    }
  }).catch((error: any) => {
    console.error('保存模型出错:', error);
  })
}

function deleteModel(row: any) {
  aiService.deleteAiModel(row.id).then(res => {
    // 处理后端响应格式：{code: 0, msg: "success", data: [...]}
    if (res && res.code === 0) {
      editVisible.value = false
      fetchModels()
    } else {
      console.error('删除模型失败:', res?.msg || '未知错误');
    }
  }).catch((error: any) => {
    console.error('删除模型出错:', error);
  })
}

function confirmDelete() {
  dialog.warning({
    title: '确认删除',
    content: '确定要删除这个模型吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => deleteModel(editModel.value)
  })
}

// 筛选器相关方法
function toggleFilter() {
  filterVisible.value = !filterVisible.value
  // 如果打开筛选器，添加点击外部关闭的事件监听
  if (filterVisible.value) {
    setTimeout(() => {
      document.addEventListener('click', handleClickOutside)
    }, 100)
  } else {
    document.removeEventListener('click', handleClickOutside)
  }
}

// 点击外部关闭筛选器
function handleClickOutside(event: Event) {
  const filterContainer = document.querySelector('.idea-filter-button-container')
  if (filterContainer && !filterContainer.contains(event.target as Node)) {
    filterVisible.value = false
    document.removeEventListener('click', handleClickOutside)
  }
}

function selectTypeFilter(value: string) {
  selectedFilters.value.type = selectedFilters.value.type === value ? '' : value
  applyFilters()
}

function selectTagFilter(value: string) {
  const index = selectedFilters.value.tags.indexOf(value)
  if (index > -1) {
    selectedFilters.value.tags.splice(index, 1)
  } else {
    selectedFilters.value.tags.push(value)
  }
  applyFilters()
}

function selectVendorFilter(value: string) {
  selectedFilters.value.vendor = selectedFilters.value.vendor === value ? '' : value
  applyFilters()
}

function selectStatusFilter(value: string) {
  selectedFilters.value.status = selectedFilters.value.status === value ? '' : value
  applyFilters()
}

function selectContextFilter(value: string) {
  selectedFilters.value.context = selectedFilters.value.context === value ? '' : value
  applyFilters()
}

function applyFilters() {
  // 这里可以根据筛选条件重新获取模型数据
  fetchModels()
}

// 获取模型标签数组
function getModelTags(model: any) {
  if (!model.tags) return []
  // 如果tags是字符串，按逗号分割
  if (typeof model.tags === 'string') {
    return model.tags.split(',').map((tag: string) => tag.trim()).filter((tag: string) => tag)
  }
  // 如果tags已经是数组，直接返回
  return model.tags
}

// 获取第一个标签
function getFirstTag(model: any) {
  const tags = getModelTags(model)
  return tags.length > 0 ? tags[0] : ''
}

// 获取标签类型样式类
function getTypeTagClass(tag: string) {
  switch (tag) {
    case '对话':
      return 'idea-type-tag type-dialogue'
    case '嵌入':
      return 'idea-type-tag type-embedding'
    case '视频':
      return 'idea-type-tag type-video'
    case '重排序':
      return 'idea-type-tag type-rerank'
    default:
      return 'idea-type-tag type-default'
  }
}

onMounted(async () => {
  // 直接调用API获取最新的模型列表，不依赖store缓存
  fetchModels()
  fetchAvailableIcons()
})

onUnmounted(() => {
  // 组件卸载时移除事件监听器
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
:deep(.n-layout-scroll-container) {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.n-layout-content) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* IDEA风格的布局 */
.idea-header {
  background: var(--background-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.idea-header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.idea-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 筛选按钮容器 */
.idea-filter-button-container {
  position: relative;
  display: inline-block;
}

/* 筛选按钮样式 */
.idea-filter-button {
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* 新增按钮样式 */
.idea-add-button {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: white;
}

/* 筛选弹窗样式 */
.idea-filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  margin-top: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
}

.idea-filter-content {
  padding: 16px;
  background: var(--bg-primary);
}



/* IDEA风格的模型卡片容器 */
.idea-model-cards-container {
  height: 100%;
  overflow-y: auto;
  padding: 8px;
  background: var(--background-secondary);
}

.idea-empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 300px;
  color: var(--text-secondary);
}

.idea-empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.idea-empty-state-text {
  font-size: 14px;
}

.idea-model-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  padding: 8px;
}

/* IDEA风格的模型卡片 */
.idea-model-card {
  position: relative;
  border-radius: 4px;
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  transition: all 0.15s ease;
  overflow: hidden;
  height: 160px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.idea-model-card:hover {
  border-color: var(--accent-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.idea-model-card-disabled {
  border-left: 3px solid var(--error-color);
  background: var(--background-disabled);
  opacity: 0.7;
}

/* IDEA风格的卡片内容 */
.idea-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
}

.idea-model-title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.idea-model-icon {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  background: var(--background-secondary);
  flex-shrink: 0;
}

.idea-model-icon-placeholder {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--background-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.idea-model-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idea-model-description {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4em;
  max-height: 2.4em;
}

.idea-model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.idea-model-tag {
  background: var(--background-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
}

.idea-model-tag.context-tag {
  background: var(--background-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* IDEA风格的类型标签 */
.idea-type-tag.type-dialogue {
  background: var(--background-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.idea-type-tag.type-embedding {
  background: var(--background-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.idea-type-tag.type-video {
  background: var(--background-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.idea-type-tag.type-rerank {
  background: var(--background-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.idea-type-tag.type-default {
  background: var(--background-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* IDEA风格的状态指示器 */
.idea-status-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
}

.idea-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.idea-status-enabled {
  background: var(--background-success);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}

.idea-status-enabled .idea-status-dot {
  background: var(--success-color);
}

.idea-status-disabled {
  background: var(--background-error);
  color: var(--error-color);
  border: 1px solid var(--error-color);
}

.idea-status-disabled .idea-status-dot {
  background: var(--error-color);
}

/* IDEA风格的编辑抽屉 */
.idea-edit-drawer :deep(.n-drawer) {
  background: var(--bg-primary);
}

.idea-edit-drawer :deep(.n-drawer-content) {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

.idea-edit-drawer :deep(.n-drawer-header) {
  border-bottom: 1px solid var(--border-color);
  padding: 8px 12px;
}

.idea-edit-drawer :deep(.n-drawer-body) {
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.idea-edit-drawer :deep(.n-drawer-footer) {
  border-top: 1px solid var(--border-color);
  padding: 8px 12px;
}

.idea-edit-form {
  padding: 8px 12px;
}

.idea-edit-form :deep(.n-form-item) {
  margin-bottom: 8px;
}

.idea-edit-form :deep(.n-form-item-label) {
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 12px;
}

.idea-edit-form :deep(.n-input) {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.idea-edit-form :deep(.n-input__input-el) {
  background-color: var(--bg-secondary);
}

.idea-edit-form :deep(.n-input__border) {
  border: none;
}

.idea-edit-form :deep(.n-input__state-border) {
  border: none;
}

.idea-edit-form :deep(.n-input--focus) {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.2);
}

.idea-edit-form :deep(.n-select) {
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

.idea-edit-form :deep(.n-base-selection) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.idea-edit-form :deep(.n-base-selection--focus) {
  border: none !important;
  box-shadow: none !important;
}

.idea-edit-form :deep(.n-base-selection__border) {
  display: none !important;
}

.idea-edit-form :deep(.n-base-selection__state-border) {
  display: none !important;
}

.idea-edit-form :deep(.n-checkbox) {
  background-color: transparent;
}

.idea-edit-form :deep(.n-checkbox-box) {
  border: 1px solid var(--border-color);
}

/* 全局输入框和选择器样式 */
.idea-input, .idea-select {
  width: 100%;
}

.idea-input :deep(.n-input) {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 2px;
}

.idea-input :deep(.n-input__input-el) {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.idea-input :deep(.n-input__border), .idea-input :deep(.n-input__state-border) {
  display: none !important;
}

.idea-input :deep(.n-input--focus) {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.2);
}

/* IDEA风格的选择器 - 参考ModelSelector.vue的简洁实现 */
.idea-select {
  position: relative;
  z-index: 1; /* 确保选择器在正确的层级 */
  background-color: transparent !important;
}

.idea-select :deep(.n-base-selection) {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  background: white !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.idea-select :deep(.n-base-selection:hover) {
  border-color: #16baaa !important;
  box-shadow: 0 2px 8px rgba(22, 186, 170, 0.15) !important;
}

.idea-select :deep(.n-base-selection .n-base-selection-label) {
  height: 32px !important;
  line-height: 32px !important;
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 500 !important;
}

.idea-select :deep(.n-base-selection .n-base-selection-border) {
  border: none !important;
}

.idea-select :deep(.n-base-selection .n-base-selection-arrow) {
  transition: transform 0.2s !important;
}

.idea-select :deep(.n-base-selection:hover .n-base-selection-arrow) {
  transform: rotate(180deg) !important;
}

/* 下拉菜单样式 */
.idea-select :deep(.n-base-select-menu) {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  position: absolute !important;
  z-index: 1000 !important;
  background: white !important;
}

.idea-select :deep(.n-base-select-option) {
  padding: 8px 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  min-height: 36px !important;
}

.idea-select :deep(.n-base-select-option:last-child) {
  border-bottom: none !important;
}

.idea-select :deep(.n-base-select-option:hover) {
  background-color: #f5f5f5 !important;
}

.idea-select :deep(.n-base-select-option.n-base-select-option--selected) {
  background-color: #e8f5f8 !important;
  color: #16baaa !important;
  font-weight: 500 !important;
}

/* 防止文本框异常显示 - 增强版本 */
.idea-select :deep(.n-base-input),
.idea-select :deep(.n-input),
.idea-select :deep(.n-input__input-el),
.idea-select :deep(.n-input__border),
.idea-select :deep(.n-input__state-border) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* IDEA风格的图标选择 */
.idea-icon-display {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.idea-icon-placeholder {
  width: 48px;
  height: 48px;
  border: 2px dashed var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.idea-icon-placeholder:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: var(--background-hover);
}

.idea-selected-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  border: 2px solid var(--accent-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.idea-icon-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 12px;
}

.idea-icon-selector-option {
  width: 56px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-primary);
  transition: all 0.15s ease;
}

.idea-icon-selector-option:hover {
  border-color: var(--accent-color);
  transform: scale(1.05);
}

.idea-icon-selector-option.selected {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.idea-icon-selector-image {
  width: 44px;
  height: 44px;
  border-radius: 3px;
  object-fit: cover;
}

.idea-icon-upload {
  display: inline-block;
}

/* IDEA风格的模态框 */
.idea-modal :deep(.n-dialog) {
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.idea-modal :deep(.n-dialog__title) {
  font-weight: 600;
  color: var(--text-primary);
}
</style>
